<!-- 矛盾纠纷化解模块组件 -->
<template>
<div class="bigBox">
  <div class="bgimg"></div>
  <div class="com-container" ref="seller">
  </div>
</div>

</template>

<script>
import echarts from 'echarts'

export default {
  props: {

  },
  data () {
    return {
      chartData: [
        { name: '行业调解1', value: 1 },
        { name: '行政调解28', value: 28 },
        { name: '司法调解31', value: 31 },
        { name: '协商和解43', value: 43 },
        { name: '人民调解434', value: 434 }
      ]
    }
  },
  computed: {

  },
  mounted () {
    this.initChart()
  },
  methods: {
    initChart () {
      const pieChart = echarts.init(this.$refs.seller)
      // 对图表初始化配置的控制
      // 初始化数据
      let sum = 0
      // 放置需要显示的图例(if you need)
      const legendData = []

      // 循环数据 累计sum值
      this.chartData.forEach(item => {
        sum += item.value * 1 // *1保证sum值为数值
        legendData.push(item.name)
      })
      // 给数据加上总数sum 通过颜色及透明度设置不显示
      this.chartData.push({ name: '总数' + sum, value: sum, itemStyle: { normal: { color: 'rgba(0, 0, 0, 0)' } } })
      // 下面给图例加上配置 都是官方的api
      pieChart.setOption({
        tooltip: {
          trigger: 'item',
          // formatter: '{a}<br/>{b}:{c}({d}%)'
          formatter: '{b}:{c}({d}%)',
          show: false
        },
        // color: ['#ffaf3a', '#13d4d5', '#fa8f83', '#32baff', '#92d675'],
        color: [
          {
            x: 0,
            y: 1,
            x2: 1,
            y2: 1,
            colorStops: [
            // !! 在此添加想要的渐变过程色 !!
              { offset: 0, color: '#888888' },
              { offset: 1, color: '#c4c4c4' }
            ]
          },
          {
            x: 0,
            y: 1,
            x2: 1,
            y2: 1,
            colorStops: [
            // !! 在此添加想要的渐变过程色 !!
              { offset: 0, color: '#984746' },
              { offset: 1, color: '#40100f' }
            ]
          },
          {
            x: 0,
            y: 1,
            x2: 1,
            y2: 1,
            colorStops: [
            // !! 在此添加想要的渐变过程色 !!
              { offset: 0, color: '#fff600' },
              { offset: 1, color: '#362801' }
            ]
          },
          {
            x: 0,
            y: 1,
            x2: 1,
            y2: 1,
            colorStops: [
            // !! 在此添加想要的渐变过程色 !!
              { offset: 0, color: '#21b7f9' },
              { offset: 1, color: '#041f30' }
            ]
          },
          {
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [
            // !! 在此添加想要的渐变过程色 !!
              { offset: 0, color: '#12eef2' },
              { offset: 1, color: '#05141b' }
            ]
          }
        ],
        legend: {
          orient: 'vertical', // vertical 设置图例展示方向
          data: legendData,
          icon: 'circle',
          itemHeight: 10,
          top: '40%',
          left: '65%',
          itemGap: 8,
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        },
        series: [
          {
            name: '随意啦', // 上面formatter的a，不显示a可不设置
            type: 'pie',
            startAngle: 180, // 重点！这里设置饼图从180°初渲染，刚好从上下将饼图平分成两部分
            radius: ['40%', '100%'],
            center: ['40%', '77%'],
            data: this.chartData,
            label: {
              color: '#fff'
            },
            itemStyle: {
              normal: {
                labelLine: {
                  show: false // 隐藏指示线
                }
              }

            }
          }
        ]
      })
    }
  },
  components: {

  }
}
</script>

<style scoped lang="less">
.com-container{
    width: 620px;
    height: 255px;
}
.bigBox{
  position: relative;
}
.bgimg{
    background-image: url("./image/gfd3fs.png");
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    height: 164px;
    width: 328px;
    top: 50%;
    left: 48%;
    z-index: 999;
    transform: translate(-50%,-50%);
    background-size: 79%;
}
</style>
